<!-- eslint-disable vue/multi-word-component-names -->
<template>
  <div class="breadcrumb2">
   
  <template v-for="(item, index) in routes" :key="index">
    <span>{{ item.meta.name }}</span>
      <span v-if="index < routes.length - 1">  / </span>
    </template>
  </div>
</template>

<script setup>
import { onMounted ,watch,reactive} from 'vue';
import {useRoute} from 'vue-router'

const route = useRoute();
console.log(route,'route');
let routes = reactive([]);

onMounted(()=>{
  ChangePath()
  console.log(routes,'routes');
})
watch(() => route.path,(oldVal, newVal)=>{
  if(oldVal!== newVal){
    
    ChangePath()
  }
})

const ChangePath=()=>{
    routes.splice(0, routes.length)
 route.matched.forEach(item => {  
      routes.push(item);  
    })
}




</script>

<style lang="scss" scoped>
  .breadcrumb2{
    height: 32px;
    overflow: hidden;
    margin-left: 16px;
    line-height: 50px;
  }
</style>